<template>
    <div class="container">
        <div class="flex">
            <div class="left">
                <div style="display: flex;align-items: center;">
                    <div class="section-title">
                        三定方案人数
                    </div>
                    <span style="color: #ff6666;font-weight: bold;">（注：各类核定面积根据三定方案人数核定）</span>
                </div>
                <el-table :data="sdData" border>
                    <el-table-column type="index" label="序号" width="100" />
                    <el-table-column align="left" label="职级名称" prop="rank"></el-table-column>
                    <el-table-column align="left" label="三定方案人数" prop="numbers">
                        <template #default="scope">
                            <el-input v-model.number="scope.row.numbers"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" label="核定面积" prop="area"></el-table-column>
                </el-table>
            </div>
            <div class="right">
                <div class="section-title">
                    实有人数
                </div>
                <el-table :data="syData" border>
                    <el-table-column type="index" label="序号" width="100" />
                    <el-table-column align="left" label="职级名称" prop="rank"></el-table-column>
                    <el-table-column align="left" label="实有编制人数" prop="numbers">
                        <template #default="scope">
                            <el-input v-model.number="scope.row.numbers"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" label="核定面积" prop="area"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="warning_box">
            办公室配备不与职级挂钩，由使用单位在核定总面积内统筹合理安排。同时任有领导职务和职级的，按所任领导职务对应的办公室使用面积标准执行；只任有职级的，按任该职级之前的最近领导职务（含职务、职级并行前非领导职务）对应的办公室使用面积标准执行。
        </div>
        <div class="btn-box">
            <el-button class="btn" type="primary" @click="onSubmit">保存</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useUserStore } from '@/pinia/modules/user'
import { useStorage } from '@vueuse/core'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'
import {
    unitStaff,
    unitBaseInfo,
    unitSaveStaff
} from '@/api/unit'
import {
    getZjList
} from '@/api/xitongpeizhi'
const userStore = useUserStore()
const zjObj = {
    '省级正职': 54,
    '省级副职': 42,
    '正厅(局)级': 30,
    '副厅(局)级': 24,
    '正处级': 18,
    '副处级': 12,
    '处级以下': 9,
    '市级正职': 42,
    '市级副职': 30,
    '正局(处)级': 24,
    '副局(处)级': 18,
    '局(处)级以下': 9,
    '县级正职': 30,
    '县级副职': 24,
    '正科级': 18,
    '副科级': 12,
    '科级以下': 9,
    '乡级正职': 0,
    '乡级副职': 0,
    '乡级以下': 0,
}
defineOptions({
    name: 'Dashboard'
})
const rules = reactive({
    name: [{ required: true, message: '请输入单位性质名称', trigger: 'blur' }]
})
const dwxxForm = ref(null)
const sdData = ref([])
const syData = ref([])
const form = ref({
    unitId: JSON.parse(localStorage.getItem('userInfo')).unitId
})
onMounted(async () => {
    if(localStorage.getItem('userInfo')){
       form.value.unitId = JSON.parse(localStorage.getItem('userInfo')).unitId
    }
    const res = await unitStaff()
    if (res.code == 200) {
        if (res.result.length > 0) {
            sdData.value = res.result.filter(item=>item.type==1)
            syData.value = res.result.filter(item=>item.type==2)
        } else {
            Promise.all([unitBaseInfo(), getZjList()]).then(res => {
                let realName = res[1].result.data.find(item => item.id == res[0].result.rank).realName
                let zjArr = realName.split('|')
                for (const key in zjObj) {
                    if (zjArr.includes(key)) {
                        sdData.value.push({
                            rank: key,
                            area: String(zjObj[key]),
                            numbers: 0,
                            type: 1
                        })
                        syData.value.push({
                            rank: key,
                            area:String(zjObj[key]),
                            numbers: 0,
                            type: 2
                        })
                    }
                }
            })
        }
    }
})
const tableData = ref([])
const onSubmit = async() => {
    let params = {
        unitId:form.value.unitId,
        unitRank:[...sdData.value,...syData.value]
    }
    let res = await unitSaveStaff(params)
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '保存成功!'
        })
    }
}
</script>

<style lang="scss" scoped>
.section-title {
    font-weight: bold;
    font-size: 16px;
    line-height: 33px;
    padding-left: 14px;
    color: #4E7DF7;
    position: relative;
}

.section-title:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 14px;
    border-radius: 3px;
    background: #4E7DF7;
}

.flex {
    display: flex;
    padding-top: 10px;
    background-color: #fff;

    .left {
        flex: 1;
        background-color: #fff;
        padding: 10px;
    }

    .right {
        flex: 1;
        background-color: #fff;
        padding: 10px;
    }
}

.warning_box {
    background-color: rgba(255, 229, 100, .3);
    border-color: #e7c000;
    color: #6b5900;
    font-size: 15px;
    width: calc(100% - 26px);
    border-left-width: 6px;
    border-left-style: solid;
    padding: 10px;
    margin: 20px 0;
}

.btn-box {
    display: flex;
    justify-content: center;
}

.btn {
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}
</style>